<template>
  <div class="pinglun">
    <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          >
      <div class="item" @click="godetails(item.id_value)" v-for="(item,index) in collect" :key="index">
        <div class="top">
          <div class="t-le">
            <img :src="item.avatar" alt="">
            <div>{{item.user_name}}</div>
          </div>
          <div class="t-ri">
            {{item.formated_add_time}}
          </div>
        </div>
        <div class="nr">{{item.content}}</div>
        <div class="foot">
          <img :src="item.goods_thumb" alt="">
          <div class="foot-r">
            <p class="p1">{{item.cmt_name}}</p>
            <p class="p2">{{item.price}}</p>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        collect:[],
        // 分页
        loading: false,
        finished: false,
        page:1
      }
    },
    created() {
      this.shoucang(1)
    },
    mounted(){
      
    },
    
    methods: {
      onLoad() {
        setTimeout(() => {
          this.page+=1
          this.shoucang(this.page)
        }, 500);
      },
      // shoucang
      shoucang(page){
        this.$get("api/gzh_mine.php?action=comment_list", {
          uid:localStorage.getItem('uid'),
          page:page
        }).then(res => { 
          
          this.loading=false
          if(page==1){
              if(res.data.length==0){
                  this.finished=true
              }else{
                  this.collect = res.data
              }
              if(res.data.length>0&&res.data.length<10){
                  this.finished=true
                  // this.page = 1
              }
              
          }else{
              if(res.data.length==0){
                  this.finished=true
              }else{
                  for (const key in res.data) {
                      this.collect.push(res.data[key])
                  }
              }
              if(res.data.length>0&&res.data.length<10){
                  this.finished=true
                  // this.page = 1
              }
              
          }
        }).catch(err => {

        });
      },
      godetails(id){
        this.$router.push({name:'comment-list',query: {goods_id:id}}) 
      },
    },
  }
</script>

<style scoped>
.pinglun{
  width: 100%;
  height: 100%;
}

.item{
  width:686px;
  height: 306px;
  margin: auto;
  border-bottom: 1PX solid #E5E5E5;
}
.top{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
}
.t-le{
  display: flex;
  align-items: center;
}
.t-le img{
  width: 61px;
  height: 61px;
  border-radius:50%;
  background: #ccc;
  margin-right: 21px;
}
.t-le div{
font-size:28px;
font-family:PingFang SC;
font-weight:500;
color:rgba(51,51,51,1);
line-height:30px;
}
.t-ri{
  font-size:26px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,0.7);
  line-height:30px;
}
.nr{
  font-size:32px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:30px;
  margin-top: 5px;
  margin-left: 80px;
  margin-bottom: 50px;
}
.foot{
  width:590px;
  height:109px;
  background:rgba(251,245,244,1);
  border-radius:20px;
  margin: auto;
  display: flex;
  align-items: center;
}
.foot img{
  width:109px;
  height:105px;
  border-radius:20px;
  background: #ccc;
  margin-right: 22px;
}
.p1{
  font-size:26px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:30px;
}
.p2{
  font-size:26px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(240,53,30,1);
  line-height:30px;
  margin-top: 22px;
}
</style>
<style>
  .van-list{
      height:100vh;
      width: 100%;
      overflow: hidden;
    overflow-y: scroll;
  }
  .van-list__error-text, .van-list__finished-text, .van-list__loading, .van-pull-refresh__head{
    font-size: 28px;
  }
</style>